import h from './mysnabbdom/h.js';
import patch from './mysnabbdom/patch.js';
// import vnode from './mysnabbdom/vnode.js';

/* 
patch函数被调用
1.oldVnode是虚拟节点还是DOM节点？
  1.是DOM节点
    将oldVnode包装为虚拟节点
  2.是虚拟节点
2.odlVnode和newVnode是不是同一个节点
  1.是同一个节点
    精细化比较
  2.不是同一个节点
    暴力删除旧的，插入新的
*/
const container = document.getElementById('container');
// const vnode = h('h1', {}, '你好');

// let vnode = h('ul', {}, [
//   h('li', {}, '西瓜'),
//   h('li', {}, '相机'),
//   h('li', {}, '桃子'),
//   // h('ul', {}, [
//   //   h('li', {}, '西瓜1'),
//   //   h('li', {}, '相机2'),
//   //   h('li', {}, '桃子3'),
//   // ])
// ]);
// let vnode = h('span', {}, '你好');

let vnode = h('ul', {}, [
  h('li', { key: 'A' }, '西瓜'),
  h('li', { key: 'B' }, '相机'),
  h('li', { key: 'C' }, '桃子'),
  h('li', { key: 'D' }, '相机21'),
  h('li', { key: 'E' }, '相机3')
]);
console.log(vnode);
patch(container, vnode);


// let vnode1 = h('ol', {}, [
//   h('li', {}, '西瓜1'),
//   h('li', {}, '桃子'),
//   h('li', {}, '相机2')
// ]);

// let vnode1 = h('span', {}, [
//   h('li', {}, '西瓜1'),
//   h('li', {}, '桃子'),
//   h('li', {}, '相机2')
// ]);
let vnode1 = h('ul', {}, [


  h('li', { key: 'Q' }, '西瓜1222'),
  h('li', { key: 'W' }, '西瓜1222W'),
  h('li', { key: 'A' }, '西瓜12'),
  h('li', { key: 'B' }, '相机2'),
  h('li', { key: 'C' }, '桃子'),
  h('li', { key: 'D' }, '相机21'),
  h('li', { key: 'E' }, '相机3'),
  // h('li', { key: 'F' }, '相机4')
]);


const btn = document.getElementById('btn');
btn.onclick = () => {
  patch(vnode, vnode1);
}
